<template>
  <div class="box">
    <!-- <el-input
      v-model="input"
      placeholder="注册账号"
      clearable
      style="margin-bottom: 10px"
    />
    <el-input v-model="password" type="密码" placeholder="密码" show-password />
    <el-button color="#626aef" style="margin-top: 10px" @click="regs"
      >注册</el-button
    > -->

    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      class="demo-ruleForm"
      style="width: 5rem"
    >
      <el-form-item prop="age">
        <el-input v-model.number="ruleForm.age" placeholder="输入手机号" />
      </el-form-item>
      <el-form-item prop="pass">
        <el-input
          v-model="ruleForm.pass"
          type="password"
          autocomplete="off"
          placeholder="输入密码"
        />
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input
          v-model="ruleForm.checkPass"
          type="password"
          autocomplete="off"
          placeholder="二次密码"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="regs">注册</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { sjxz, passwordauthentication } from "../configuration/rules";
import { usemd5 } from "../hooks/index";
import { useRouter } from "vue-router";
import { registered } from "../axios/http";
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("手机号不能为空"));
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error("不是数字"));
    } else {
      if (sjxz(value)) {
        callback();
      } else {
        callback(new Error("手机号格式不正确"));
      }
    }
  }, 1000);
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else {
    if (passwordauthentication(value)) {
      callback();
    } else {
      callback(new Error("密码格式有误!6至15位的字母+数字"));
    }
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("二次密码不能为空"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("俩次密码不一样"));
  } else {
    callback();
  }
};
const ruleForm = reactive({
  pass: "",
  checkPass: "",
  age: "",
});
async function regs() {
  const arr = await registered(ruleForm.age, usemd5(ruleForm.pass));
  console.log(arr);
  if (arr.data.id || arr.data.name || arr.data.password) {
    console.log(usemd5(ruleForm.pass));
    router.push("/login/log");
  }
}

const rules = reactive({
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  age: [{ validator: checkAge, trigger: "blur" }],
});

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped lang="scss">
.box {
  width: 5rem;
  margin: 0.25rem;
}
</style>
